<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>整体概览 | 前端文档</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="shortcut icon" href="/icons/favicon.ico">
    <meta name="description" content="前端文档">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/assets/css/0.styles.d3d84be6.css" as="style"><link rel="preload" href="/assets/js/app.7f089e4c.js" as="script"><link rel="preload" href="/assets/js/2.9f5e73e8.js" as="script"><link rel="preload" href="/assets/js/3.2a47c23c.js" as="script"><link rel="preload" href="/assets/js/13.20c94e2c.js" as="script"><link rel="prefetch" href="/assets/js/10.b5c5700e.js"><link rel="prefetch" href="/assets/js/11.80390338.js"><link rel="prefetch" href="/assets/js/12.f067bd5f.js"><link rel="prefetch" href="/assets/js/14.3a03f335.js"><link rel="prefetch" href="/assets/js/15.fc48fa10.js"><link rel="prefetch" href="/assets/js/16.06981385.js"><link rel="prefetch" href="/assets/js/17.9b40465f.js"><link rel="prefetch" href="/assets/js/18.d89ca224.js"><link rel="prefetch" href="/assets/js/19.c6848e16.js"><link rel="prefetch" href="/assets/js/20.a0711b97.js"><link rel="prefetch" href="/assets/js/21.d566ad85.js"><link rel="prefetch" href="/assets/js/22.4901943a.js"><link rel="prefetch" href="/assets/js/23.d6255fa3.js"><link rel="prefetch" href="/assets/js/24.a88ce84e.js"><link rel="prefetch" href="/assets/js/25.19886fd0.js"><link rel="prefetch" href="/assets/js/26.5c944025.js"><link rel="prefetch" href="/assets/js/27.a61fd313.js"><link rel="prefetch" href="/assets/js/28.1e40ebfd.js"><link rel="prefetch" href="/assets/js/29.60c8dbe1.js"><link rel="prefetch" href="/assets/js/30.64963157.js"><link rel="prefetch" href="/assets/js/31.931ea69e.js"><link rel="prefetch" href="/assets/js/32.bce771e5.js"><link rel="prefetch" href="/assets/js/33.e9c7453f.js"><link rel="prefetch" href="/assets/js/34.99c27ee8.js"><link rel="prefetch" href="/assets/js/35.4066b2d3.js"><link rel="prefetch" href="/assets/js/36.fc941c57.js"><link rel="prefetch" href="/assets/js/37.14163d29.js"><link rel="prefetch" href="/assets/js/38.43335765.js"><link rel="prefetch" href="/assets/js/39.156dbace.js"><link rel="prefetch" href="/assets/js/4.6d8feda3.js"><link rel="prefetch" href="/assets/js/40.163bfe43.js"><link rel="prefetch" href="/assets/js/41.df97e701.js"><link rel="prefetch" href="/assets/js/42.9bafe70e.js"><link rel="prefetch" href="/assets/js/43.b86d1037.js"><link rel="prefetch" href="/assets/js/44.fc145987.js"><link rel="prefetch" href="/assets/js/45.594b749a.js"><link rel="prefetch" href="/assets/js/46.b6c8de53.js"><link rel="prefetch" href="/assets/js/47.bb78b392.js"><link rel="prefetch" href="/assets/js/48.3627a180.js"><link rel="prefetch" href="/assets/js/49.bbd39edf.js"><link rel="prefetch" href="/assets/js/5.77776c33.js"><link rel="prefetch" href="/assets/js/50.b68a715f.js"><link rel="prefetch" href="/assets/js/51.bc4475a2.js"><link rel="prefetch" href="/assets/js/6.480ee688.js"><link rel="prefetch" href="/assets/js/7.92c95b3e.js"><link rel="prefetch" href="/assets/js/8.4389b91c.js"><link rel="prefetch" href="/assets/js/9.4470fdec.js">
    <link rel="stylesheet" href="/assets/css/0.styles.d3d84be6.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">前端文档</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav> <label title="切换暗色" class="model"><input type="checkbox" hidden="hidden" name="model" id>⚫</label></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="standard Menu" class="dropdown-title"><span class="title">规范</span> <span class="arrow down"></span></button> <button type="button" aria-label="standard Menu" class="mobile-dropdown-title"><span class="title">规范</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/standard/HTML/" class="nav-link">
  HTML编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CSS/" class="nav-link">
  CSS编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JavaScript/" class="nav-link">
  JavaScript编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/VUE/" class="nav-link">
  VUE编码规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/Markdown/" class="nav-link">
  Markdown语法说明
</a></li><li class="dropdown-item"><!----> <a href="/standard/Commit/" class="nav-link">
  Git提交规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/JSON/" class="nav-link">
  JSON数据规范
</a></li><li class="dropdown-item"><!----> <a href="/standard/CopyWriter/" class="nav-link">
  文案风格指南
</a></li></ul></div></div><div class="nav-item"><a href="/desgin/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  可视化平台
</a></div><div class="nav-item"><a href="/materiel/" class="nav-link">
  物料
</a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="plugin Menu" class="dropdown-title"><span class="title">插件</span> <span class="arrow down"></span></button> <button type="button" aria-label="plugin Menu" class="mobile-dropdown-title"><span class="title">插件</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/plugin/HRM-Player/" class="nav-link">
  HRM 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Vue-Flv-Player/" class="nav-link">
  FLV 播放器
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Calendar/" class="nav-link">
  Calendar 农历面板
</a></li><li class="dropdown-item"><!----> <a href="/plugin/Very-Axios/" class="nav-link">
  Very-Axios
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="utils Menu" class="dropdown-title"><span class="title">函数库</span> <span class="arrow down"></span></button> <button type="button" aria-label="utils Menu" class="mobile-dropdown-title"><span class="title">函数库</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/utils/Type/" class="nav-link">
  类型判断类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Validator/" class="nav-link">
  常规验证类
</a></li><li class="dropdown-item"><!----> <a href="/utils/String/" class="nav-link">
  字符串类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Array/" class="nav-link">
  数组类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Number/" class="nav-link">
  数字类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Money/" class="nav-link">
  金额类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Date/" class="nav-link">
  日期类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Calculate/" class="nav-link">
  浮点计算类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Tools/" class="nav-link">
  工具类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Storage/" class="nav-link">
  存储类
</a></li><li class="dropdown-item"><!----> <a href="/utils/DOM/" class="nav-link">
  DOM类
</a></li><li class="dropdown-item"><!----> <a href="/utils/Event/" class="nav-link">
  事件处理类
</a></li></ul></div></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="tools Menu" class="dropdown-title"><span class="title">工具</span> <span class="arrow down"></span></button> <button type="button" aria-label="tools Menu" class="mobile-dropdown-title"><span class="title">工具</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/tools/NodeJS/" class="nav-link">
  NodeJS
</a></li><li class="dropdown-item"><!----> <a href="/tools/Sourcetree/" class="nav-link">
  Sourcetree
</a></li><li class="dropdown-item"><!----> <a href="/tools/VisualStudioCode/" class="nav-link">
  VSCode
</a></li><li class="dropdown-item"><!----> <a href="/tools/XShell/" class="nav-link">
  XShell
</a></li><li class="dropdown-item"><!----> <a href="/tools/Typora/" class="nav-link">
  Typora
</a></li><li class="dropdown-item"><!----> <a href="/tools/PicGo/" class="nav-link">
  PicGo
</a></li><li class="dropdown-item"><!----> <a href="/tools/XMind/" class="nav-link">
  XMind
</a></li></ul></div></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>可视化平台</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/desgin/" aria-current="page" class="active sidebar-link">整体概览</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/desgin/#_0-整体界面" class="sidebar-link">0. 整体界面</a></li><li class="sidebar-sub-header"><a href="/desgin/#_1-头部操作区" class="sidebar-link">1. 头部操作区</a></li><li class="sidebar-sub-header"><a href="/desgin/#_2-组件列表区" class="sidebar-link">2. 组件列表区</a></li><li class="sidebar-sub-header"><a href="/desgin/#_3-组件操作区" class="sidebar-link">3. 组件操作区</a></li><li class="sidebar-sub-header"><a href="/desgin/#_4-画布拖拽区" class="sidebar-link">4. 画布拖拽区</a></li><li class="sidebar-sub-header"><a href="/desgin/#_5-样式编辑区" class="sidebar-link">5. 样式编辑区</a></li></ul></li><li><a href="/desgin/CreateDemo.html" class="sidebar-link">常规布局-索引&amp;表格</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="整体概览"><a href="#整体概览" class="header-anchor">#</a> 整体概览</h1> <p>此文档为前端可视化平台说明文档，旨在帮助开发快速上手可视化平台。</p> <h2 id="_0-整体界面"><a href="#_0-整体界面" class="header-anchor">#</a> 0. 整体界面</h2> <p><img src="/imgs/desgin/overview/0.png" alt="整体界面">
界面分为 5 个区域：</p> <ol><li><strong>头部操作区</strong>：功能有预览、撤销、恢复、导出模板、导入模板、清空画布。</li> <li><strong>组件列表区</strong>：可拖拽组件都在此区域，根据功能区分出基础组件、公共物料、业务物料。</li> <li><strong>组件操作区</strong>：选中组件后，此区域会出现组件的属性、方法、数据，可以在此区域编辑组件。</li> <li><strong>画布拖拽区</strong>：在此区域内，组件可以任意拖拽嵌套和选中删除。</li> <li><strong>样式编辑区</strong>：编辑当前界面的样式。</li></ol> <h2 id="_1-头部操作区"><a href="#_1-头部操作区" class="header-anchor">#</a> 1. 头部操作区</h2> <p><img src="/imgs/desgin/overview/1.png" alt="头部操作区"></p> <ul><li><em>预览</em>：拖拽完成后，跳转到预览界面。</li> <li><em>撤销 / 恢复</em>：常规操作。</li> <li><em>导出 / 导入模板</em>：使用可视化平台拖拽出来的界面，可以通过导出分享给其他同事，导出后的文件，可以直接导入回可视化平台中。</li> <li><em>清空</em>：直接把整个界面删除，不可逆操作。</li> <li><em>查看数据</em>：可以查看下载预览后的界面代码。</li></ul> <h2 id="_2-组件列表区"><a href="#_2-组件列表区" class="header-anchor">#</a> 2. 组件列表区</h2> <p>此区域展示可视化平台所有可拖拽组件列表。</p> <h3 id="_2-1-基础组件"><a href="#_2-1-基础组件" class="header-anchor">#</a> 2.1 基础组件</h3> <p>平台使用最新版的魔方组件作为基础组件，按照组件的类型分为四大类：</p> <h4 id="_2-1-1-布局类组件"><a href="#_2-1-1-布局类组件" class="header-anchor">#</a> 2.1.1 布局类组件</h4> <p>此类组件负责常规布局，其中栅格组件负责行列布局，例如下图布局：</p> <p><img src="/imgs/desgin/overview/2.1.1.1.png" alt="常规搜索"></p> <p>首先，使用栅格布局，拖拽出来左右两列，左侧栅格放置按钮，右侧栅格放置表单（需要设置栅格右对齐）</p> <p><img src="/imgs/desgin/overview/2.1.1.2.png" alt="常规搜索"></p> <p>其次，在右侧栅格中，拖入表单组件，表单组件属性设置为行内表单。</p> <p><img src="/imgs/desgin/overview/2.1.1.3.png" alt="常规搜索"></p> <p>这样就完成了一个顶部常规搜索的布局。</p> <p>平台也提供了一些常规的布局容器，方便快速搭建页面的基本结构，但是这些布局容器不支持自适应布局。</p> <p><img src="/imgs/desgin/overview/2.1.1.4.png" alt="布局容器"></p> <p>更多布局容器使用方法，可查看 <a href="http://mc.glodon.com:8081/#/component/container" target="_blank" rel="noopener noreferrer">Container 布局容器<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> 。</p> <h4 id="_2-1-2-表单类组件"><a href="#_2-1-2-表单类组件" class="header-anchor">#</a> 2.1.2 表单类组件</h4> <p>此类组件主要用于表单项，表单布局支持栅格布局、块级布局、行内布局，默认使用 <strong>24</strong> 栅格布局。</p> <p>使用栅格表单，很容易的做出一行两列，一行三列，一行四列的布局。</p> <p><img src="/imgs/desgin/overview/2.1.2.1.png" alt="栅格布局"> <img src="/imgs/desgin/overview/2.1.2.2.png" alt="块级布局"> <img src="/imgs/desgin/overview/2.1.2.3.png" alt="行内布局"></p> <h4 id="_2-1-3-数据组件及其他"><a href="#_2-1-3-数据组件及其他" class="header-anchor">#</a> 2.1.3 数据组件及其他</h4> <p>此类组件根据基础组件分类划分，其中紫色组件大多为数据展示组件，绿色组件大多为嵌套组件。</p> <p><img src="/imgs/desgin/overview/2.1.3.1.png" alt="数据组件及其他"></p> <p>例如生成一个弹窗，弹窗中有表格组件。</p> <p><img src="/imgs/desgin/overview/2.1.3.2.png" alt="弹窗"></p> <p>其中弹窗组件和抽屉组件，如果需要显示或隐藏，需要在数据配置中，配置显示为  <code>false</code>  即可。</p> <p><img src="/imgs/desgin/overview/2.1.3.3.png" alt="弹窗"></p> <p>弹窗和抽屉组件，不占用页面布局，建议此类组件放在页面最下部即可。</p> <h3 id="_2-2-公共组件"><a href="#_2-2-公共组件" class="header-anchor">#</a> 2.2 公共组件</h3> <p>可视化平台支持引入第三方优秀组件，这里暂时引入了三个公共组件，使用方法同基础组件一样，后续会持续引入第三方组件。</p> <p><img src="/imgs/desgin/overview/2.2.png" alt="公共组件"></p> <h3 id="_2-3-业务物料"><a href="#_2-3-业务物料" class="header-anchor">#</a> 2.3 业务物料</h3> <blockquote><p>物料即组成一个前端项目的不同单位，根据抽象粒度的不同，我们将物料从小到大分为组件（ <code>component</code> ）、区块（ <code>block</code> ）和模板（ <code>scaffold</code> ）。在基于物料体系的开发中，我们使用项目物料来初始化前端工程，提供最佳实践，解决工程问题，再使用区块和组件像搭积木一样快速搭建页面。</p></blockquote> <p>除了基础组件和公共组件，平台还支持引入业务物料，方便快速开发。只需要通过物料模板，可以快速开发生成业务物料。</p> <p><img src="/imgs/desgin/overview/2.3.png" alt="业务物料"></p> <p>平台目前集成了大数据的下拉组件和工程政采的表格组件，后期持续引入更多业务物料。</p> <h2 id="_3-组件操作区"><a href="#_3-组件操作区" class="header-anchor">#</a> 3. 组件操作区</h2> <p>此区域主要是对组件进行一些参数配置。</p> <h3 id="_3-1-属性及数据配置"><a href="#_3-1-属性及数据配置" class="header-anchor">#</a> 3.1 属性及数据配置</h3> <p>这里主要是对组件  <code>prop</code>  进行配置，某些组件也配置了默认数据（虽然没啥用，但是可以直观的展示组件数据）。</p> <p><img src="/imgs/desgin/overview/3.1.1.png" alt="组件操作区"> <img src="/imgs/desgin/overview/3.1.2.png" alt="组件操作区"></p> <h3 id="_3-2-子组件操作"><a href="#_3-2-子组件操作" class="header-anchor">#</a> 3.2 子组件操作</h3> <p>某些组件是由主子组件共同组合的，例如按钮组、表单、页签、表格等，在组件操作区可以<strong>增加</strong>子组件、<strong>删除</strong>子组件、调整子组件<strong>顺序</strong>。</p> <p><img src="/imgs/desgin/overview/3.2.png" alt="子组件操作"></p> <h3 id="_3-3-添加事件名"><a href="#_3-3-添加事件名" class="header-anchor">#</a> 3.3 添加事件名</h3> <p>一些组件，支持一些事件方法，可以在此方便的添加。</p> <p><img src="/imgs/desgin/overview/3.3.png" alt="事件添加"></p> <h2 id="_4-画布拖拽区"><a href="#_4-画布拖拽区" class="header-anchor">#</a> 4. 画布拖拽区</h2> <p>在此区域内，组件可以任意拖拽嵌套和选中删除。</p> <p>下图虚线框中可嵌套任意组件：</p> <p><img src="/imgs/desgin/overview/4.1.png" alt="组件嵌套"></p> <p>例如在页签组件中嵌套表格组件：</p> <p><img src="/imgs/desgin/overview/4.2.png" alt="组件嵌套"></p> <p>选中组件后，会有组件选中的效果，如下图：</p> <p><img src="/imgs/desgin/overview/4.3.png" alt="组件选中效果"></p> <h2 id="_5-样式编辑区"><a href="#_5-样式编辑区" class="header-anchor">#</a> 5. 样式编辑区</h2> <p>在此区域内，可手写样式，但是不建议开发使用。</p> <p><img src="/imgs/desgin/overview/5.1.png" alt="手写样式"></p></div> <footer class="page-edit"><!----> <div class="last-updated"><span class="prefix">文档更新时间:</span> <span class="time">2021-06-10 17:57:34</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/desgin/CreateDemo.html">
        常规布局-索引&amp;表格
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.7f089e4c.js" defer></script><script src="/assets/js/2.9f5e73e8.js" defer></script><script src="/assets/js/3.2a47c23c.js" defer></script><script src="/assets/js/13.20c94e2c.js" defer></script>
  </body>
</html>
